<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<!--标准mui.css-->
		<link rel="stylesheet" href="../../css/mui.min.css">
		<style>
			.mui-slider-handle {
				color: #A3A3A3;
			}
		</style>
	</head>
	<body>
		<div class="mui-content">
			<div style="padding: 10px 10px;">
				<div id="segmentedControl" class="mui-segmented-control">
					<a class="mui-control-item mui-active" href="#item1">群发消息</a>
					<a class="mui-control-item" href="#item2">问诊消息</a>
					<a class="mui-control-item" href="#item3">工作室消息</a>
					<a class="mui-control-item" href="#item4">系统消息</a>
				</div>
			</div>
			<div>
				<div id="item1" class="mui-control-content mui-active">
					<!--<div id="scroll" class="mui-scroll-wrapper">
						<div class="mui-scroll">
							<ul class="mui-table-view">
							    <li class="mui-table-view-cell">问诊消息
							        <span class="mui-badge mui-badge-success">1</span>
							    </li>
							    <li class="mui-table-view-cell">工作室消息
							        <span class="mui-badge mui-badge-success">0</span>
							    </li>
							    <li class="mui-table-view-cell">系统消息
							        <span class="mui-badge mui-badge-success">0</span>
							    </li>
							</ul>
						</div>
					</div>-->
					<ul class="mui-table-view">
					    <li class="mui-table-view-cell mui-collapse">
					        <a class="mui-navigate-right" href="#">粉丝1组</a>
					        <div class="mui-collapse-content">
					            <form class="mui-input-group">
									<div class="mui-input-row mui-checkbox mui-left">
										<label>尹磊</label>
										<input name="checkbox" value="Item 1" type="checkbox" >
									</div>
								</form>
					        </div>
					    </li>
					    <li class="mui-table-view-cell mui-collapse">
					        <a class="mui-navigate-right" href="#">粉丝2组</a>
					            <div class="mui-collapse-content">
					            <p>空</p>
					        </div>
					    </li>
					</ul>
					<h5 style="margin-top: 50px;">内容</h5>
					<div class="row mui-input-row">
						<textarea id='question' class="mui-input-clear question" placeholder="请输入您的内容..."></textarea>
					</div>
					<div id="sendMsg" class="mui-table-view-cell" style="text-align: center;background-color: #007AFF; color: #fff;">
						<a>发送信息</a>
					</div>
				</div>
				<div id="item2" class="mui-control-content">
					<ul class="mui-table-view">
					    <li class="mui-table-view-cell mui-collapse">
					        <a class="mui-navigate-right" href="#">图文问诊<span class="mui-badge mui-badge-success">1</span></a>
					        <div class="mui-collapse-content" style="padding: 0;">
				             	<ul id="photoDoctor" style="padding: 0;">
				             		<li class="mui-table-view-cell mui-media" title="test">
								        <a href="javascript:;">
								            <img class="mui-media-object mui-pull-left" src="../../img/user.png">
								            <div class="mui-media-body">
								                <span>
								                	尹磊
								                </span>
								                <span>
								                	(男)
								                </span>
								                <p class='mui-ellipsis'>医生我的额骨骨折了有什么建议吗?附带我的病历.</p>
								            </div>
								        </a>
								    </li>
				             	</ul>
					        </div>
					    </li>
					    <li class="mui-table-view-cell mui-collapse">
					        <a class="mui-navigate-right" href="#">语音问诊</a>
				            <div class="mui-collapse-content" style="padding: 0;">
					            <ul id="vocalDoctor" style="padding: 0;">
					            	<li class="mui-table-view-cell">
										<div class="mui-slider-right mui-disabled">
											<a class="mui-btn mui-btn-grey mui-icon mui-icon-person" title="1"></a>
											<a class="mui-btn mui-btn-yellow mui-icon mui-icon-phone" title="1" href="tel:13986204026"></a>
										</div>
										<div class="mui-slider-handle">
											11:31到12:31您有一条预约!(消息左滑查看更多)
										</div>
									</li>
					            </ul>
					        </div>
					    </li>
					</ul>
				</div>
				<div id="item3" class="mui-control-content">
						<span style="margin-left: 10%;color: #858182;">
							暂无工作室消息
						</span>
				</div>
				<div id="item4" class="mui-control-content">
					<span style="margin-left: 10%;color: #858182;">
						暂无系统消息
					</span>
				</div>
			</div>
		</div>
		<script src="../../js/mui.min.js"></script>
		<script>
            // 页面全局变量
            var $ = mui, doc = document;
            $.init({
                swipeBack: true //启用右滑关闭功能
            });
            $.plusReady(function () {
                doc.getElementById("sendMsg").addEventListener("tap", function() {
                    //打开关于页面
                    $.toast('消息发送成功');
                    // $('#question').val('');
                });
            });
//			图文问诊
            mui('#photoDoctor').on('tap', 'li', function() {
                var msg = this.title;
                $.openWindow({
                    url: 'template/photoNewsInfo.html',
                    id: 'template/photoNewsInfo.html',
                    styles:{
                        top: '0',
                        bottom: '0'
                    }
                });
            });
            // 视频问诊
            $('#vocalDoctor').on('tap', 'a', function() {
                var msgAttr = this.className;
                var msgTitle = this.title;
                // 如果大于0是在点击Person
                if (msgAttr.indexOf('mui-icon-person') > 0) {
                    $.openWindow({
                        url: 'template/vocalNewsInfo.html',
                        id: 'template/vocalNewsInfo.html',
                        styles:{
                            top: '0',
                            bottom: '0'
                        }
                    });
                } else {
                    // 调用打电话
                }
            });
            $('#scroll').scroll({
                indicators: true //是否显示滚动条
            });
            var segmentedControl = doc.getElementById('segmentedControl');
            $('.mui-input-group').on('change', 'input', function() {
                if (this.checked) {
                    var styleEl = doc.querySelector('input[name="style"]:checked');
                    var colorEl = doc.querySelector('input[name="color"]:checked');
                    if (styleEl && colorEl) {
                        var style = styleEl.value;
                        var color = colorEl.value;
                        segmentedControl.className = 'mui-segmented-control' + (style ? (' mui-segmented-control-' + style) : '') + ' mui-segmented-control-' + color;
                    }
                }
            });
		</script>
	</body>
</html>